<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>车间成本</span>
                </h3>
                <span style="display: inline-block; width: 250px;">
                    <span style="margin-left:10px;">选择时间：</span>
                    <div style="width:120px;display:inline-block;">
                        <p-calendar
                            [(ngModel)]="selectedDate"
                            view="month"
                            dateFormat="yy-mm"
                            [yearNavigator]="true"
                            yearRange="2000:2030"
                            [locale]="calendarHelper.cn"
                            (onSelect)="getData()"
                        ></p-calendar>
                    </div>
                </span>
            </div>
            <div class="col-xs-6 text-right"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="row" style="color: #097e98; font-weight: 700; font-size: 17px;">
                    <div class="col-6">天津车间成本明细表</div>
                    <!-- <div class="col-6 text-right">单位：万元</div> -->
                </div>
                <table class="table" border="0">
                    <thead>
                        <tr>
                            <th>车间</th>
                            <th *ngFor="let category of categories">{{ category }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let workshop of workshops">
                            <th scope="row">{{ workshop?.displayText }}</th>
                            <th *ngFor="let category of categories">{{ getCellDate(workshop?.value, category) }}</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body" style="padding-bottom: 5rem;">
                <div class="row">
                    <div class="col-12">
                        <div class="m-widget14">
                            <div class="m-widget14__chart" style="height:450px;">
                                <ngx-charts-line-chart
                                    [results]="chartCosts"
                                    scheme="picnic"
                                    xAxis="true"
                                    yAxis="true"
                                    legend="true"
                                    legendTitle="车间"
                                    legendPosition="below"
                                    showXAxisLabel="true"
                                    showYAxisLabel="true"
                                    yAxisLabel="成本(元)"
                                >
                                </ngx-charts-line-chart>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
